<template>
  <div class="memberDetaiLaggregate">
    <!-- 分组 -->
    <div class="borderleftline" style="border-bottom:1px solid #f5f5f5;line-height:54px;">
      <span class="titleleft">
        会员分组设置
        <span class="description">当前{{ group.groupTags.length }}个分组</span>
        <el-tooltip class="item" effect="dark" transition="el-fade-in-linear" placement="right">
          <i class="el-icon-question"></i>
          <div slot="content">
            将具有相同特征的会员放在一个分组，您可以更有针对性地营销。
            <br />
            列如：5月1日发过短信、有欠款、可总换积分
          </div>
        </el-tooltip>
      </span>
    </div>
    <div>
      <el-tag v-for="tag in group.groupTags" :effect="'plain'" :key="tag.id" closable :disable-transitions="false"
        @close="handleClose('group', tag)">
        {{ tag.name }}
        <i class="el-icon-edit" @click="edit('group',tag,'分组')"></i>
      </el-tag>
      <el-input class="input-new-tag" v-if="group.inputVisible" v-model="group.inputValue" ref="groupSaveTagInput" size="small"
        @keyup.enter.native="handleInputConfirm('group')" @blur="handleInputConfirm('group')"></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput('group')">+ 新分组</el-button>
    </div>

    <el-divider></el-divider>

    <!-- 标签 -->
    <div class="borderleftline" style="border-bottom:1px solid #f5f5f5;line-height:54px;">
      <span class="titleleft">
        会员标签设置
        <span class="description">当前{{ lable.dynamicTags.length }}个标签</span>
        <el-tooltip class="item" effect="dark" transition="el-fade-in-linear" placement="right">
          <i class="el-icon-question"></i>
          <div slot="content">
            帮您迅速锁定顾客喜好，投其所好地推荐商品，提高成交的可能性。
            <br />
            例如：土豪、大方、注重质量、爱还价、苛刻等
          </div>
        </el-tooltip>
      </span>
    </div>
    <div>
      <el-tag v-for="tag in lable.dynamicTags" :effect="'plain'" :key="tag.id" closable :disable-transitions="false"
        @close="handleClose('lable', tag)">
        {{ tag.name }}
        <i class="el-icon-edit" @click="edit('lable',tag,'标签')"></i>
      </el-tag>
      <el-input class="input-new-tag" v-if="lable.inputVisible" v-model="lable.inputValue" ref="lableSaveTagInput" size="small"
        @keyup.enter.native="handleInputConfirm('lable')" @blur="handleInputConfirm('lable')"></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput('lable')">+ 新标签</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tooltip: {
          transition: 'el-fade-in-linear'
        },
        lable: {
          dynamicTags: [],
          inputVisible: false,
          inputValue: ''
        },
        group: {
          groupTags: [],
          inputVisible: false,
          inputValue: ''
        },
      };
    },
    activated() {
      this.getLableList();
      this.getGroupList();
    },
    methods: {
      edit(type, tag, name) {
        this.$prompt('', '编辑' + name, {
            inputValue: tag.name,
            closeOnClickModal: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            inputErrorMessage: '不能为空'
          })
          .then(({
            value
          }) => {
            if (type == 'lable') {
              //编辑标签
              this.editLable(tag, value);
            }
            if (type == 'group') {
              //编辑分组
              this.editGroup(tag, value);
            }
          })
      },
      editLable(tag, val) {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelmemberlabel/update`),
          method: 'post',
          data: this.$http.adornData({
            'id': tag.id,
            'name': val,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
            })
            this.getLableList()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      editGroup(tag, val) {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelmembergroup/update`),
          method: 'post',
          data: this.$http.adornData({
            'id': tag.id,
            'name': val,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
            })
            this.getGroupList()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      handleClose(type, tag) {
        if (type == 'lable') {
          //删除标签
          this.deleteLableHandle(tag.id);
        }
        if (type == 'group') {
          //删除分组
          this.deleteGroupHandle(tag.id);
        }
      },
      showInput(type) {
        if (type == 'lable') {
          this.lable.inputVisible = true;
          this.$nextTick(_ => {
            this.$refs.lableSaveTagInput.$refs.input.focus();
          });
        }
        if (type == 'group') {
          this.group.inputVisible = true;
          this.$nextTick(_ => {
            this.$refs.groupSaveTagInput.$refs.input.focus();
          });
        }
      },

      handleInputConfirm(type) {
        if (type == 'lable') {
          let inputValue = this.lable.inputValue;
          if (inputValue) {
            //新增标签
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelmemberlabel/save`),
              method: 'post',
              data: this.$http.adornData({
                name: inputValue
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: this.$t('Common.OperationSuccessful'),
                  type: 'success',
                  duration: 1500
                });
                this.getLableList();
              } else {
                this.$message.error(data.msg);
              }
            });
          }
          this.lable.inputVisible = false;
          this.lable.inputValue = '';
        }
        if (type == 'group') {
          let inputValue = this.group.inputValue;
          if (inputValue) {
            //新增分组
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelmembergroup/save`),
              method: 'post',
              data: this.$http.adornData({
                name: inputValue
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: this.$t('Common.OperationSuccessful'),
                  type: 'success',
                  duration: 1500
                });
                this.getGroupList();
              } else {
                this.$message.error(data.msg);
              }
            });
          }
          this.group.inputVisible = false;
          this.group.inputValue = '';
        }
      },
      //获取所有标签
      getLableList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelmemberlabel/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.lable.dynamicTags = data.page.list;
          } else {
            this.lable.dynamicTags = [];
          }
        });
      },
      deleteLableHandle(id) {
        var ids = id ?
          [id] :
          this.dataListSelections.map(item => {
            return item.id;
          });
        this.$confirm(`确定对标签[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/hotel/thotelmemberlabel/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500
              });
              this.getLableList();
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
      //获取所有分组
      getGroupList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelmembergroup/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.group.groupTags = data.page.list;
          } else {
            this.group.groupTags = [];
          }
        });
      },
      deleteGroupHandle(id) {
        var ids = id ?
          [id] :
          this.dataListSelections.map(item => {
            return item.id;
          });
        this.$confirm(`确定对分组[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/hotel/thotelmembergroup/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500
              });
              this.getGroupList();
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
    }
  };
</script>

<style>
  .memberDetaiLaggregate .el-divider {
    margin-top: 22px;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 100px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .el-tag:hover .el-icon-edit {
    display: inline-table;
  }

  .el-tag .el-icon-edit {
    display: none;
    cursor: pointer;
    padding: 3px;
  }

  .el-tag .el-icon-edit:hover {
    color: white;
    background: #17b3a3;
    border-radius: 50%;
  }

  .borderleftline .titleleft {
    border-left: 3px solid #17b3a3;
    padding-left: 8px;
  }

  .borderleftline .titleleft .description {
    margin-left: 5px;
    padding-left: 5px;
    color: #999;
    border-left: 1px solid #eaeaea;
  }

  .software_introduce_title {
    float: left;
    margin-top: 21px;
    width: 72%;
  }
</style>
